<template>
	<div class="task">
		<div class="top">
			学生管理
		</div>
		<div class="header"> 
		<div style="color: #888C9B; ">团队进入答题卷面后，系统将随机分配角色及对应技能</div>
		<div>
		<el-button>模板下载</el-button>
		<el-button @click="dialogPaperControl=true">试卷控制</el-button>
		<el-button type="primary" @click="iptTeam">导入团队</el-button>
					
		</div>
		</div>
		<div class="container">
			  <el-table
			    :data="tableData"
			    stripe
			    style="width: 100%">
			    <el-table-column
			      prop="date"
			      label="序号"
			      width="100">
			    </el-table-column>
			    <el-table-column
			      prop="name"
			      label="姓名"
			      width="100">
			    </el-table-column>
			    <el-table-column
			      prop="address"
			      label="登陆账号"
				  width="160">
			    </el-table-column>
				<el-table-column
				  prop="address"
				  label="专业"
				  width="100">
				</el-table-column>
				<el-table-column
				  prop="address"
				  label="班级"
				  width="160">
				</el-table-column>
				<el-table-column
				  prop="address"
				  label="手机号"
				  width="160">
				</el-table-column>
				<el-table-column
				  prop="address"
				  label="所属团队">
				</el-table-column>
				<el-table-column
				  prop="address"
				  label="操作">
				</el-table-column>
			  </el-table>

		</div>

		<div class="block">
		  <el-pagination
		    layout="prev, pager, next"
		    :total="1000">
		  </el-pagination>
		</div>
		
		<el-dialog title="试卷控制" :visible.sync="dialogPaperControl" >
		  <el-table :data="gridData" style="padding: 0; margin-right: 0; width: inherit;">
		    <el-table-column property="date" label="案例名称" width="300">
				<el-table-column property="auditor" label="审计单位" width="150"></el-table-column>
				<el-table-column property="auditee" label="被审单位" width="150"></el-table-column>
			</el-table-column>
		    <el-table-column property="section" label="所属环节" width="200"></el-table-column>
		    <el-table-column  label="案例名称">
				<el-table-column property="caseStatus"  label="模拟模块" width="200">
					<el-switch
					  v-model="gridData[1].caseStatus"
					  active-color="#13ce66"
					  inactive-color="#ff4949">
					</el-switch>
					
				</el-table-column>
			</el-table-column>
			<el-table-column  label="答案解析状态" width="208">
				<el-table-column  label="模拟模块" width="208">
					<el-switch
					  v-model="answerStatus[0]"
					  active-color="#13ce66"
					  inactive-color="#ff4949">
					</el-switch>
				</el-table-column>
			</el-table-column>
		  </el-table>
		</el-dialog>
		<el-dialog title="导入团队" :visible.sync="dialogAddTeam" width="20%">
			<el-upload
			  class="upload-demo"
			  ref="upload"
			  action="https://jsonplaceholder.typicode.com/posts/"
			  :on-preview="handlePreview"
			  :on-remove="handleRemove"
			  :file-list="fileList"
			  :auto-upload="false">
			  <el-button slot="trigger" size="small"  style="color:#338AFF ;margin-right: 20px;">请选择上传文件</el-button>
			  <span><a href="#">模板下载</a></span>
		
			  <div slot="tip" class="el-upload__tip">
			  	<p>注：</p>
			  	<p>1、此文件导入后，学生训练以此模板导入的团队为准。</p>
			  	<p>2、文件格式为xlsx、xls格式。</p>
			  	<p>3、支持多次导入，导入后以最后导入的团队为准。</p>
			  </div>
			</el-upload>
			<div style="width: inherit; display: flex; justify-content: center; align-items: center; width: inherit;height: 60px; margin-top: 20px;" >
				<el-button @click="dialogAddTeam=false">取消</el-button>
			<el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">确定</el-button>
			</div>
<!-- 		  <el-upload
		    class="upload-demo"
		    action="https://jsonplaceholder.typicode.com/posts/"
		    :on-preview="handlePreview"
		    :on-remove="handleRemove"
		    :before-remove="beforeRemove"
		    multiple
		    :limit="3"
		    :on-exceed="handleExceed"
		    :file-list="fileList">
		    <el-button size="small" style="color:#338AFF ;margin-right: 20px;">请选择上传文件</el-button>
			<span><a href="#">模板下载</a></span>
		    <div slot="tip" class="el-upload__tip">
				<p>注：</p>
				<p>1、此文件导入后，学生训练以此模板导入的团队为准。</p>
				<p>2、文件格式为xlsx、xls格式。</p>
				<p>3、支持多次导入，导入后以最后导入的团队为准。</p>
			</div>
		  </el-upload> -->
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:'studentManage',
		data(){
			return {
				dialogForm:false,
				dialogAddTeam:false,
				form:{
					
					
				},
				fileList:[],
				tableData:[],
				answerStatus:[],
				caseStatus:[],
				gridData:[
					{
						auditor:'长沙复兴会计事务所',
						auditee:'被审单位一',
						section:'section1',
						caseStatus:1,
						answerStatus:0,
					},
					{
						auditor:'审计单位二',
						auditee:'被审单位二',
						section:'section2',
						caseStatus:1,
						answerStatus:1,
					},
					{
						auditor:'审计单位三',
						auditee:'被审单位三',
						section:'section3',
						caseStatus:0,
						answerStatus:0,
					},
				],
				dialogPaperControl:false,
				
				
			}
		},
		mounted() {
			console.log(this.$route.path)
			this.answerStatus = this.gridData.map(val => {
				return val.answerStatus
			})
			this.answerStatus
			console.log(this.answerStatus)
		},
		methods:{
			submitUpload() {
			  this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
			  console.log(file, fileList);
			},
			handlePreview(file) {
			  console.log(file);
			},
			OpenForm(){
				this.dialogForm = true
			},
			iptTeam(){
				this.dialogAddTeam =true
			}
		}
		
	}
</script>

<style scoped>
	.el-table{
		padding-left: 20px;
	}
	.commit-task{
		width: inherit;
		height: 140px;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.el-table{
		border: 1px #DCE0E3 solid;
		margin-left: 10px;
	}
	.header{
		height: 60px;
		padding-left: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.task{
		width:1200px;
		height: 572px;

	}
	.top{
		padding-left: 19px;
		font-size: 16px;
		color:#FFFFFF;
		font-weight: 300;
		display: flex;
		align-items: center;
		width: 1200px;
		height: 52px;
		background-color: #338AFF;
	}
	.table-header{
		display: flex;
		height: 60px;
		width: 1158px;
		background-color: #F6F7F9;
	}
</style>
